<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hizzom</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-zoom/1.7.9/jquery.zoom.min.js"></script>
</head>

<body>
  <style>
    .zoom {
      display: inline-block;
      width: 250px;
      height: 250px;
    }

    .zoom img {
      width: 100%;
      height: 100%;
    }

    #target {
      position: absolute;
      left: 300px;
      top: 0;
      height: 400px;
      width: 400px;
      border: 1px solid #666;
      visibility: hidden;
    }
  </style>
  <div style="position: relative;">
    <div id="zoom" class="zoom">
      <img src="https://fair8888.oss-cn-hangzhou.aliyuncs.com/c8c5f9c5-b119-49ff-ba3b-d70864f10c43.jpg" />
    </div>
    <div id="target"></div>
  </div>



  <script>
    $('#zoom').zoom({
      target: '#target',
      onZoomIn: function () {
        $('#target').css('visibility', 'visible');
      },
      onZoomOut: function () {
        $('#target').css('visibility', 'hidden');
      }
    });
  </script>
</body>

</html>